<template>
  <div class="auth-field-config">
    <BasicTable @register="registerTable">
      <template #switch="{ text, record }">
        <a-switch size="small" :checked="record.status === 1" @change="(flag) => onUpdateStatus(flag, record)" />
      </template>
      <template #control> 可见 </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { authButtonLoadData, authButtonEnable, authButtonDisable } from '../auth.api';
  import { authButtonColumns, authButtonFixedList } from '../auth.data';
  import { cloneDeep } from 'lodash-es';

  export default defineComponent({
    name: 'AuthButtonConfig',
    components: { BasicTable },
    props: {
      headId: {
        type: String,
        default: '',
        required: true,
      },
    },
    setup(props) {
      const cgformId = ref('');
      const pageType = ref(2);
      const pageControlList = ref(3);
      const pageControlForm = ref(5);
      const [registerTable, { reload }] = useTable({
        api: loadData,
        rowKey: 'code',
        bordered: true,
        columns: authButtonColumns,
        showIndexColumn: false,
      });
      watch(
        () => props.headId,
        (headId) => {
          cgformId.value = headId.split('?')[0];
          reload().catch(() => null);
        },
        { immediate: true }
      );
      async function loadData(params) {
        let result = await authButtonLoadData(cgformId.value, params);
        let { authList, buttonList } = result;
        let dataSource = [];
        for (let btn of cloneDeep(authButtonFixedList)) {
          let item = {
            status: 0,
            page: pageControlList.value,
          };
          let auth = authList.find((auth2) => auth2.code == btn.code);
          Object.assign(btn, item, auth);
          dataSource.push(btn);
        }
        return concatCustomButton(authList, buttonList, dataSource);
      }
      function concatCustomButton(authList, buttonList, dataSource) {
        for (let btn of buttonList) {
          let auth = authList.find((auth2) => auth2.code == btn.buttonCode);
          let item = {
            code: btn.buttonCode,
            title: btn.buttonName,
            status: 0,
            page: btn.buttonStyle == 'form' ? pageControlForm.value : pageControlList.value,
          };
          dataSource.push(Object.assign(item, auth));
        }
        return dataSource;
      }
      async function onUpdateStatus(flag, record) {
        flag ? doEnableAuthButton(record) : doDisableAuthButton(record);
      }
      async function doEnableAuthButton(record) {
        let result = await authButtonEnable({
          id: record.id,
          code: record.code,
          page: record.page,
          cgformId: cgformId.value,
          type: pageType.value,
          control: 5,
          status: 1,
        });
        record.id = result.id;
        record.status = 1;
      }
      async function doDisableAuthButton(record) {
        await authButtonDisable(record.id);
        record.status = 0;
      }
      return { registerTable, onUpdateStatus };
    },
  });
</script>
<style scoped>
  .auth-field-config .ant-checkbox + span {
    padding-left: 2px;
  }
</style>
